<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            display: flex;
            align-items: center;
            height: 100vh;
            justify-content: center;
        }

        iframe {
            width: calc(0.625 * 100vh);
            height: 100vh;
            border: 1px solid #eee;
            padding: 0;
            display: block;
            border-radius: 10px;
            box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        }

        .size-btn-group-container{
            display: flex;
            height: 100vh;
            position: absolute;
            right: 0;
        }

        .size-btn-group{
            padding: 20px 20px;
        }

        .button {
            width: 80px;
            height: 50px;
            border-radius: 10px;
            border: 1px solid #eee;
            cursor: pointer;
        }

        .button:hover {
            background-color: #007aff;
            color: #fff;
        }

        .button.active {
            background-color: #007aff;
            color: #fff;
        }
    </style>
</head>

<body>
    <div id="app">
        <iframe src="/"></iframe>
        <div class="size-btn-group-container">
            <div class="size-btn-group">
                <button class="button button--large" data-size="large">大的</button>
                <button class="button button--medium" data-size="medium">中的</button>
                <button class="button button--small" data-size="small">小的</button>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    const iframe = document.querySelector('iframe');
    const buttons = document.querySelectorAll('.button');
    
    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const size = button.dataset.size;
            buttons.forEach(button => {
                button.classList.remove('active');
            });
            switch (size) {
                case 'large':
                    iframe.style.width = 'calc(0.625 * 100vh)';
                    iframe.style.height = '100vh';
                    button.classList.add('active');
                    break;
                case 'medium':
                    iframe.style.width = 'calc(0.625 * 95vh)';
                    iframe.style.height = '95vh';
                    button.classList.add('active');
                    break;
                case 'small':
                    iframe.style.width = 'calc(0.625 * 90vh)';
                    iframe.style.height = '90vh';
                    button.classList.add('active');
                    break;
            }
        });
    });
</script>